<template>
	<div class="container">
		<form @submit.prevent="getValue">
			<select class="form-control" v-model="startL">
				<option value="zh">中文</option>
				<option value="en">英文</option>
			</select>
			<input type="text" class="form-control" placeholder="在此输入要查询的内容" v-model="textValue">
			<select class="form-control" v-model="endL">
				<option value="en">英文</option>
				<option value="ko">韩语</option>
				<option value="fr">法语</option>
				<option value="de">德语</option>
				<option value="ru">俄语</option>
			</select>
			<input class="btn btn-default btn-primary" type="submit" value="提交">
		</form>
	</div>
</template>

<script>
	export default {
		name: 'TranslateMain',
		data() {
			return {
				textValue: '',
				startL: 'zh',
				endL: 'en'
			}
		},
		methods: {
			getValue() {
				// event.preventDefault()
				this.$emit('sendValue', this.textValue, this.startL, this.endL)
			}
		}
	}
</script>

<style scoped="scoped">
	.container {
		width: 500px;
	}

	input {
		margin: 10px 0;
	}

	.btn {
		margin-top: 20px;
	}
</style>
